import React from 'react'
import ReactDOM from "react-dom"
import App from "../views/App.jsx"
import { Provider } from 'mobx-react'
import { AppContainer } from "react-hot-loader"
import { BrowserRouter } from 'react-router-dom'

import AppState from  '../store/app-state'

const root = document.getElementById('root')
const initialState = window.__INITIAL__STATE__ || {}
const render = Conponent =>{
	ReactDOM.hydrate(
		<AppContainer >
			<Provider appState = {new AppState(initialState.appState)}>
				<BrowserRouter>
					<Conponent />
				</BrowserRouter>
			</Provider>
		</AppContainer>,
		root
	)

}
render(App)

if (module.hot) {
	console.log("-------- _ module.hot _---------")
	module.hot.accept('../views/App.jsx', ()=> {
		const NextApp = require('../views/App.jsx').default
		render(NextApp)
	})
}